<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网易云的主要区域-left</title>
    <link
      rel="shortcut icon"
      href="//s1.music.126.net/style/favicon.ico?v20180823"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/main-area-right.css" />
    <style>
      .main .area {
        display: flex;
        justify-content: space-between;
        border: 1px solid #d3d3d3;
        border-width: 0 1px;
        background-image: url(./img/main_bg.png);
      }

      /* 左侧区域 */
      .main .area-left {
        width: 729px;
        padding: 20px 20px 40px;
      }

      .recommend-section .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px 2px;
      }

      .recommend-section .list .item {
        width: 140px;
        margin-bottom: 30px;
      }

      .recommend-section .list .item .top {
        position: relative;
      }

      .recommend-section .list .item .top .cover {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        background-image: url(./img/cover_sprite.png);
        background-position: 0 0;
      }

      .recommend-section .list .item .top .info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 27px;
        padding-left: 10px;
        line-height: 27px;

        font-size: 12px;
        color: #ccc;

        background-image: url(./img/cover_sprite.png);
        background-position: 0 -537px;
      }

      .recommend-section .list .item .top .info .icon-music {
        position: relative;
        top: 1px;
      }

      .recommend-section .list .item .top .info .count {
        margin-left: 4px;
      }

      .recommend-section .list .item .top .info .icon-play {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        margin: auto 0;
      }

      /* 底部的样式 */
      .recommend-section .list .item .bottom {
        display: block;
        margin-top: 8px;
        font-size: 14px;
      }

      .recommend-section .list .item .bottom:hover {
        text-decoration: underline;
      }

      .recommend-section .list .item .bottom .icon-radio {
        position: relative;
        top: 2px;
      }

      /* 新碟上架 */
      .disc-section .content {
        height: 186px;
        margin: 20px 0;
        box-sizing: border-box;
        border: 1px solid #d3d3d3;
      }

      .disc-section .content .inner {
        position: relative;
        height: 100%;
        box-sizing: border-box;
        padding: 0 25px;
        border: 1px solid #fff;
        background-color: #f5f5f5;
      }

      .disc-section .content .roller {
        display: flex;
        height: 100%;
        overflow: hidden;
      }

      .disc-section .inner .roller .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-top: 10px;
        flex-shrink: 0;
      }

      .disc-section .roller .list .item {
        width: 118px;
        height: 150px;
        background: url(./img/main_sprite.png) no-repeat -260px 100px;
      }

      .disc-section .roller .list .item .album {
        position: relative;
      }

      .disc-section .roller .list .item .cover {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url(./img/cover_sprite.png) no-repeat 0 -570px;
      }

      .disc-section .roller .item .album .play {
        display: none;
        position: absolute;
        right: 10px;
        bottom: 5px;
        width: 22px;
        height: 22px;
        background: url(./img/icon_sprite.png) 0 -85px;
      }

      .disc-section .roller .item .album:hover .play {
        display: block;
      }

      .disc-section .roller .list .item a {
        display: block;
        margin-top: 5px;
        padding-right: 10px;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .disc-section .roller .list .item a:hover {
        text-decoration: underline;
      }

      .disc-section .roller .list .item a.title {
        color: #000;
        margin-top: 8px;
      }

      .disc-section .roller .list .item a.anchor {
        color: #666;
      }

      .disc-section .inner .control {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 72px;
        bottom: 0;
        background-image: url(./img/main_sprite.png);
      }

      .disc-section .inner .control-left {
        left: 5px;
        background-position: -260px -75px;
      }

      .disc-section .inner .control-right {
        right: 5px;
        background-position: -320px -75px;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="area wrapper_02">
        <div class="area-left">
          <div class="recommend-section">
            <div class="header_type_02">
              <div class="area_left">
                <h2 class="title">热门推荐</h2>
                <ul class="keywords">
                  <li><a href="#" class="item">华语</a></li>
                  <li class="line">|</li>
                  <li><a href="#" class="item">流行</a></li>
                  <li class="line">|</li>
                  <li><a href="#" class="item">摇滚</a></li>
                  <li class="line">|</li>
                  <li><a href="#" class="item">民谣</a></li>
                  <li class="line">|</li>
                  <li><a href="#" class="item">电子</a></li>
                </ul>
              </div>
              <div class="area_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>

            <div class="list">
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span>
                    <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">天气好的话，把耳机分我一半吧</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span>
                    <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">
                  <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                  天气好的话，把耳机分我一半吧</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span
                    ><i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">天气好的话，把耳机分我一半吧</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span>
                    <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">
                  <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                  天气好的话，把耳机分我一半吧</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span>
                    <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">
                  <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                  天气好的话，把耳机分我一半吧</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span>
                    <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">天气好的话，把耳机分我一半吧</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span>
                    <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">天气好的话，把耳机分我一半吧</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./img/recommend_album_01.jpeg" alt="音乐封面" />
                  <a href="#" class="cover"></a>
                  <div class="info">
                    <i class="icon_sprite icon_sprite_music icon-music"></i>
                    <span class="count">62万</span>
                    <i class="icon_sprite icon_sprite_play_01 icon-play"></i>
                  </div>
                </div>
                <a href="#" class="bottom">
                  <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                  天气好的话，把耳机分我一半吧</a>
              </div>
            </div>
          </div>
          <div class="disc-section">
            <div class="header_type_02">
              <div class="area_lef">
                <h2 class="title">新碟上架</h2>
              </div>
              <div class="area_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>

            <div class="content">
              <div class="inner">
                <div class="roller">
                  <ul class="list">
                    <li class="item">
                      <div class="album">
                        <img src="./img/newdisc_album_01.jpeg" alt="" />
                        <a href="#" class="cover"> </a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title"
                        >原神-佚落迁忘之岛 Islands of the Lost and Forgotten
                      </a>
                      <a href="#" class="anchor">HOYO-Mix</a>
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./img/newdisc_album_01.jpeg" alt="" />
                        <a href="#" class="cover"> </a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title"
                        >原神-佚落迁忘之岛 Islands of the Lost and Forgotten
                      </a>
                      <a href="#" class="anchor">HOYO-Mix</a>
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./img/newdisc_album_01.jpeg" alt="" />
                        <a href="#" class="cover"> </a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title"
                        >原神-佚落迁忘之岛 Islands of the Lost and Forgotten
                      </a>
                      <a href="#" class="anchor">HOYO-Mix</a>
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./img/newdisc_album_01.jpeg" alt="" />
                        <a href="#" class="cover"> </a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title"
                        >原神-佚落迁忘之岛 Islands of the Lost and Forgotten
                      </a>
                      <a href="#" class="anchor">HOYO-Mix</a>
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./img/newdisc_album_01.jpeg" alt="" />
                        <a href="#" class="cover"> </a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title"
                        >原神-佚落迁忘之岛 Islands of the Lost and Forgotten
                      </a>
                      <a href="#" class="anchor">HOYO-Mix</a>
                    </li>
                  </ul>
                  <ul class="list">
                    2
                  </ul>
                </div>
                <a href="#" class="control control-left"></a>
                <a href="#" class="control control-right"></a>
              </div>
            </div>
          </div>
          <div class="disc-section">
            <div class="header_type_02">
              <div class="area_lef">
                <h2 class="title">榜单</h2>
              </div>
              <div class="area_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>
          </div>
        </div>
        <div class="area-right">
          <div class="user-login">
            <p class="desc">
              登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
            </p>
            <a href="#" class="btn">用户登录</a>
          </div>
          <div class="settle-singer">
            <div class="header_type_01">
              <h3 class="title">入驻歌手</h3>
              <a href="#" class="more">查看全部 &gt;</a>
            </div>
            <ul class="list">
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./img/singer_01.jpeg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./img/singer_01.jpeg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./img/singer_01.jpeg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./img/singer_01.jpeg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹aaaaaaaaaaaaaaaaa</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./img/singer_01.jpeg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="hot-anchor">
            <div class="header_type_01">
              <h3 class="title">热门主播</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
